<!--头部公共部分-->
{include file="common/header" /}
<div class="x-nav">
      <span class="layui-breadcrumb">
        <a>首页</a>
        <a>系统</a>
        <a>
          <cite>通知列表</cite></a>
      </span>
	<a class="layui-btn layui-btn-xs layui-btn-small" style="float:right;margin-top: 10px;"
	   href="javascript:location.replace(location.href);" title="刷新">
		<i class="layui-icon layui-icon-refresh"></i> </a>
</div>
<div id="wodekehu" class="x-body" class="clear:both;">
	<div class="layui-row"
		 style="padding-left:20px;border-left:1px solid #e5e5e5;border-right:1px solid #e5e5e5;">
		<div class="layui-form layui-col-md12 x-so layui-form-pane">
			<input class="layui-input" type="text" name="day" placeholder="请选择时间" autocomplete="off" id="searchday">
			<div class="layui-input-inline">
				<button class="layui-btn" id="search">
					<i class="layui-icon layui-icon-search"></i>筛选</button>
				<button class="layui-btn layui-btn-danger" id="clear">
					<i class="layui-icon"></i>重置</button>
			</div>
		</div>
	</div>
	<table class="layui-hide" id="LAY_table_user" lay-filter="table"></table>
	<script type="text/html" id="barTable">
		<a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="detail">查看</a>
	</script>
</div>
<!--底部公共部分-->
{include file="common/footer" /}

<script>
	layui.use(['table','element', 'layer', 'laydate'], function () {
		var $ = layui.$,
			table = layui.table,
			layer = layui.layer,
			element = layui.element,
			laydate = layui.laydate;

			laydate.render({
				elem: '#searchday', //指定元素
				range: true,
				trigger: 'click',
				value: '',
				btns: ['now', 'confirm'],
				ready: function(date) {
					//得到初始的日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
				},
				done: function(value, date, endDate) {
				}
			});
		var loading = layer.load();
		//数据表格 方法级渲染
		var tableIns = table.render({
			elem: '#LAY_table_user',
			url: '{:url("System/notice")}'
			, method: 'POST'
			, height: 315
			, loading: true
			, parseData: function (res) { //res 即为原始返回的数据
				if (res.code === 1) {
					res.code = 0;
				} else {
					res.code = -1;
				}
				return {
					"code": res.code, //解析接口状态
					"msg": res.message, //解析提示文本
					"count": res.data.total, //解析数据长度
					"data": res.data.data //解析数据列表
				};
			},
			cols: [[
				{field: 'notice_name', title: '通知名称',style:'color:#01AAED;font-weight: bold;', width: 150, align: 'center'
				}, {field: 'user_name', title: '发布人', width: 150, align: 'center'
				}, {field: 'content', title: '通知内容', minWidth: 300, align: 'center'
				}, {field: 'create_time', title: '通知时间', width: 200, align: 'center'
				}, {field: 'is_read_text', title: '状态', width: 100, align: 'center'
				}, {fixed: 'right', title: '操作', width: 100, align: 'center', toolbar: '#barTable'}
			]]
			, height: 'full-180'
			, page: true
			, done: function () {
				layer.close(loading);
			}
		});
		//监听工具条
		table.on('tool(table)', function (obj) {
			var data = obj.data; //获得当前行数据
			console.log(data)
			var layEvent = obj.event; //获得 lay-event 对应的值
			var tr = obj.tr; //获得当前行 tr 的DOM对象
			if(layEvent === 'detail') { //查看
				location.href = "{:url('System/notice_detail')}?id="+data.id;
			}
		});
		//搜索项
		$('#search').click(function () {
			var field = {};
			field.is_read = $('select[name=is_read] option:selected').val();
			field.day = $('input[name=day]').val();
			console.log(field);
			tableIns.reload({
				where: field,
				method: 'POST',
				page: {
					curr: 1 //重新从第 1 页开始
				}
			});
		});//清除
		$('#clear').click(function () {
			$('.layui-input').each(function (index, element) {
				$(element).val('');
			})
			tableIns.reload({
				where: {
					'day': ''
				},
				page: {
					curr: 1 //重新从第 1 页开始
				}
			});
		});
	});
</script>